/* ===========================================================================*/ /*-- Begin Color Scheme */ /* ===========================================================================*/ /* Color Schemes: https://www.w3schools.com/colors/colors_schemes.asp */ /* I picked a tri-color pallette scheme for MIKESBLOG*/ /* 6/18/23: Updated my color scheme same as facebook for most now /* #3B5998 : Dark Background and dark text (for links was #183BF0 )(same as facebook): 6/18/23: was #236AB9 /* #8B9DC3 : Med Background (Sub Headings and table sub headings) (e.g. LG3) (same as facebook) /* #DFE3EE : Light Background and Light Text (with darker backgroud) 5/18/23: was #D4E4F7 - used for main grid /* #F7F7F7 : Lighter background for side bar grids 6/18/23 was #ddd /* White : For most text on dark background 6/18/23 ()same as facebook) /* #5A18C9 : Links Highlight /* #3B5998 : Footer (Bottom) 6/18/23: was #190934 /* these are the main sections of the page */ /* ===========================================================================*/ /*-- End Color Scheme */ /* ===========================================================================*/ /* ===========================================================================*/ /* Body: setting the body margin to 0px will avoid a small border around the page */ /* ===========================================================================*/ body { margin: 0px; font-size: 16px} /* ===========================================================================*/ /* ===========================================================================*/ /* Define full page Grid based on media viewport */ /* ===========================================================================*/ .FullPage { /* /* display grid properties are modifed for different viewport sizes this is the default grid all elements stackes and 100%. Used for small view ports. */ display: grid; grid-template-columns: 100%; grid-template-rows: auto auto 1fr auto auto; grid-template-areas: "Header" "SideBarLeft" "Main" "SideBarRight" "Footer"; /* END display grid properties for different viewports */ max-width: auto; /* width of the viewport */ min-height: 100vh; /* 100% of height of viewport keeps footer at bottom */ margin: 0 auto; /* top,bottom =0 left,right=auto(browser chooses) */ color: black; font-family: "Arial",Helvetica,sans-serif; font-style: normal; text-align: center; } /* END FullPage */ /* used for sidebarlinks */ /* NOTE: this changes for different @media viewport sizes.*/ /* NOTE: for some reason this has to be placed above the @media calls or it does not work properly??*/ figure.SideBarLink {float: left; width: 10%; margin: 1% 1% 1% 1%; padding: .5%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} .SideBarBreak{ } div.StickToTop {display: none;} /* /* Reset some classes for viewports larger than 540 pixels */ @media only screen and (min-width: 540px) { .FullPage { grid-template-columns: 1fr 8fr 1fr; grid-template-rows: auto 1fr auto; grid-auto-rows: minmax(75px, auto); grid-template-areas: "Header Header Header" "SideBarLeft Main SideBarRight" "Footer Footer Footer"; } figure.SideBarLink {width: 40%; margin: 1% 35% 1% 35%; padding: .5%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} div.StickToTop {display: block;} } /* ===========================================================================*/ /* END Define full page based on media viewport */ /* ===========================================================================*/ /* ===========================================================================*/ /* Main Blog Sections */ /* ===========================================================================*/ .Header {grid-area: Header; text-align: center; background-color: #3B5998; color: White; /* 6/18/23 */ font-family: "Times New Roman", Times, serif; padding: 10px; /* position: fixed; left: 0; top: 0; width: 100%; */ } .Main {grid-area: Main; padding: 10px; text-align: left; background: #DFE3EE; /* 6/18/23 was #D4E4F7 */ border-left: 4px solid #3B5998; border-right: 4px solid #3B5998;} .SideBarLeft {grid-area: SideBarLeft; background-color: #F7F7F7; padding: 10px; text-align: left;} .SideBarRight {grid-area: SideBarRight; padding: 10px; background-color: #F7F7F7;} .Footer {grid-area: Footer; padding: 20px; background-color: #3B5998; color: White; /* 6/18/23 background-color: #190934; color: #D4E4F7 */ text-align: center; font-style: italic; text-align: left; padding: 5px;} /* ===========================================================================*/ /* END Main Blog Sections */ /* ===========================================================================*/ /* ===========================================================================*/ /* Heading Styles */ /* ===========================================================================*/ /* used in the header so the default margin does not make the header bigger */ h1.ZeroMargin {margin: 0px;} /* linear gradient used for blog dates and Itenery headings */ /* I use this to start a new day*/ h3.LG1 {border: solid black 2px; padding: 1em .5em 1em .5em; border-radius: 15px; color: White; /* 6/18/23: was #D4E4F7 */ background: #3B5998} /* 6/18/23: was #236AB9 */ h3.LG2 {border: solid black 2px; padding: 1em .5em 1em .5em; border-radius: 15px; color:#3B5998; /* 6/18/23: was #236AB9 */ background:#D4E4F7} /* I use this one for h3 headings within a day, just a little smaller than the h3 LG1 that I use to delineate the days of the trip*/ h3.LG3 {border: solid black 1px; padding: .5em .5em .5em .5em; border-radius: 15px; /* 6/18/23 was 5px */ color:White; /* 6/18/23: was #D4E4F7 */ background: #8B9DC3} /* 6/18/23: was #236AB9 */ p.LG1 {font-size: 8px; color:#D4E4F7; background: #236AB9} #nationalParkName { font-size: 24px; /* Font size */ color: #3B5998; /* Font color */ text-align: left; font-style: bold; } /* ===========================================================================*/ /* End Heading Styles */ /* ===========================================================================*/ /* ===========================================================================*/ /* link colors */ /* ===========================================================================*/ a:link{color:#3B5998;} a:visited{color:#3B5998;} /* same as link (unvisited)) */ a:hover{color:#5A18C9;} a:focus{color:#3B5998;} /* same as link (unvisited)) */ a:active{color:red;} /* ===========================================================================*/ /* End link colors */ /* ===========================================================================*/ /* ===========================================================================*/ /* Place text on top of a picture /* NOTE:also refer to the itinerary section of a travel blog html */ /* ===========================================================================*/ /* problems with this. .FigText { color: black; font-size: 15px; padding: 8px 12px; position: relative; bottom: 30px; width: 100%; text-align: center; } */ /* ===========================================================================*/ /* to get videos to align just like the picture (using float left) I created /* ths class. And to set the width, just set it inline in the video statement .* so I don't have to make a ton of these classes' /* ===========================================================================*/ .videoleftclass {float: left; margin: .2%; padding: 0%;} /* ===========================================================================*/ /* figure styles */ /* used to display an img with a corresponding caption */ /* the family varies the Width as a % of the container AND how it floats */ /* Note: Use % for margin and padding so it scales no matter constainer size*/ /* ===========================================================================*/ /* left */ figure.Left-05 {float: left; width: 5%; margin: .5%; padding: .5%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Left-08 {float: left; width: 08%; margin: .5%; padding: .5%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Left-10 {float: left; width: 10%; margin: .5%; padding: .5%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Left-12 {float: left; width: 12%; margin: .5%; padding: .5%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Left-15 {float: left; width: 15%; margin: .5%; padding: .5%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} /* good match of height of portrait for EOS60D with landscape at Left-30*/ figure.Left-16 {float: left; width: 16%; margin: .5%; padding: .5%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Left-20 {float: left; width: 20%; margin: .5%; padding: .5%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} /* use this for six across*/ figure.Left-14 {float: left; width: 14%; margin: .5%; padding: .5%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} /* use this for 4 across */ figure.Left-23 {float: left; width: 23%; margin: .5%; padding: .5%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Left-25 {float: left; width: 25%; margin: .5%; padding: .5%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Left-27 {float: left; width: 27%; margin: .5%; padding: .5%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Left-28 {float: left; width: 28%; margin: .5%; padding: .5%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Left-30 {float: left; width: 30%; margin: .5%; padding: .5%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} /* use this for three across*/ figure.Left-31 {float: left; width: 31%; margin: .5%; padding: .5%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Left-38 {float: left; width: 38%; margin: .5%; padding: .5%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Left-40 {float: left; width: 40%; margin: .5%; padding: .5%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} /* use this for two across*/ figure.Left-48 {float: left; width: 48%; margin: .5%; padding: .5%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Left-50 {float: left; width: 50%; margin: .5%; padding: .5%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Left-60 {float: left; width: 60%; margin: .5%; padding: .5%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Left-70 {float: left; width: 70%; margin: .5%; padding: .5%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Left-80 {float: left; width: 80%; margin: .5%; padding: .5%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Left-90 {float: left; width: 90%; margin: .5%; padding: .5%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Left-100 {float: left; width: 100%; margin: .5%; padding: .5%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} /*right*/ figure.Right-05 {float: right; width: 5%; margin: .5%; padding: .5%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Right-10 {float: right; width: 10%; margin: .5%; padding: .5%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Right-12 {float: right; width: 12%; margin: .5%; padding: .5%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Right-15 {float: right; width: 15%; margin: .5%; padding: .5%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Right-16 {float: right; width: 16%; margin: .5%; padding: .5%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Right-20 {float: right; width: 20%; margin: .5%; padding: .5%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Right-23 {float: right; width: 23%; margin: .5%; padding: .5%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Right-25 {float: right; width: 25%; margin: .5%; padding: .5%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Right-28 {float: right; width: 28%; margin: .5%; padding: .5%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Right-30 {float: right; width: 30%; margin: .5%; padding: .5%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Right-31 {float: right; width: 31%; margin: .5%; padding: .5%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Right-40 {float: right; width: 40%; margin: .5%; padding: .5%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Right-48 {float: right; width: 48%; margin: .5%; padding: .5%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Right-50 {float: right; width: 50%; margin: .5%; padding: .5%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Right-60 {float: right; width: 60%; margin: .5%; padding: .5%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Right-70 {float: right; width: 70%; margin: .5%; padding: .5%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Right-80 {float: right; width: 80%; margin: .5%; padding: .5%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Right-90 {float: right; width: 90%; margin: .5%; padding: .5%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Right-100 {float: right; width: 100%; margin: .5%; padding: .5%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} /* centering with no float. Note: you have to adjust the L and R margins when you change the width of the pic to keep it centered*/ figure.Center-10 { width: 10%; margin: 1% 40% 1% 40%; padding: .5%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Center-25 { width: 25%; margin: 1% 37.5% 1% 37.5%; padding: .5%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Center-30 { width: 30%; margin: 1% 35% 1% 35%; padding: .5%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Center-48 { width: 48%; margin: 1% 24% 1% 24%; padding: .5%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Center-50 { width: 50%; margin: 1% 25% 1% 25%; padding: .5%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Center-75 { width: 75%; margin: 1% 12.5% 1% 12.5%; padding: .5%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Center-100 { width: 100%; margin: 1% 0% 1% 0%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} /* same as Center-100 but no padding */ figure.Center-100np { width: 100%; margin: 0% 0% 0% 0%; padding: 0px; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} /*used for the "link" (Travel, ModelKits, Woodworing, etc.) pages to the specific blogs. /* Gets you three aside and differnete caption characteristics */ /* Note: width+margin+padding+border = (31+.5+.5+0)x3 = 99% of container so, will always keep 3 across no matter container size */ figure.LinkPage {float: left; width: 31%; margin: .5%; padding: .5%; text-align: center; text-indent: 0;} /* Layouts that mimic a grid layout but aspect ratios are preserved however- must have images all the same aspect ratio... 4:3 / 3:4 etc.*/ /* 2 across */ figure.Left-49d60 {float: left; width: 49.60%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} /* 3 across */ figure.Left-32d90 {float: left; width: 32.90%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} /* 4 across */ figure.Left-24d60 {float: left; width: 24.60%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} /* 5 across */ figure.Left-19d60 {float: left; width: 19.60%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} /* 6 across */ figure.Left-16d26 {float: left; width: 16.26%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} /* 7 across */ figure.Left-13d88 {float: left; width: 13.88%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} /* 8 across */ figure.Left-12d10 {float: left; width: 12.10%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Left-42d60 {float: left; width: 42.60%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Left-41d60 {float: left; width: 41.60%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Left-40d60 {float: left; width: 40.60%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Left-39d60 {float: left; width: 39.60%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Left-38d60 {float: left; width: 38.60%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Left-37d60 {float: left; width: 37.60%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Left-36d60 {float: left; width: 36.60%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Left-35d60 {float: left; width: 35.60%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Left-34d60 {float: left; width: 34.60%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Left-33d60 {float: left; width: 33.60%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Left-32d60 {float: left; width: 32.60%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Left-31d60 {float: left; width: 31.60%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Left-30d60 {float: left; width: 30.60%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Left-29d60 {float: left; width: 29.60%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Left-28d60 {float: left; width: 28.60%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Left-27d60 {float: left; width: 27.60%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Left-26d60 {float: left; width: 26.60%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Left-25d60 {float: left; width: 25.60%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} /* 24d60 already defined */ figure.Left-23d60 {float: left; width: 23.60%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Left-22d60 {float: left; width: 22.60%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Left-21d60 {float: left; width: 21.60%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Left-20d60 {float: left; width: 20.60%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Left-19d60 {float: left; width: 19.60%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Left-18d60 {float: left; width: 18.60%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Left-17d60 {float: left; width: 17.60%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Left-16d60 {float: left; width: 16.60%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Left-15d60 {float: left; width: 15.60%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Left-14d60 {float: left; width: 14.60%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Left-13d60 {float: left; width: 13.60%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Left-12d60 {float: left; width: 12.60%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Left-11d60 {float: left; width: 11.60%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Left-10d60 {float: left; width: 10.60%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Left-9d60 {float: left; width: 9.60%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Left-8d60 {float: left; width: 8.60%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Left-7d60 {float: left; width: 7.60%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Left-6d60 {float: left; width: 6.60%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Left-5d60 {float: left; width: 5.60%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} /*================================================================================ Mixing and matching with same depth ================================================================================ 3/17/24 Samsung phones M S10 P 2268x4032 & 2592x4608 Ratio 0.56250 M S10 L 4032x2268 & 4608x2592 Ratio 1.7777... K S8 P 2268x4032 Ratio 0.56250 K S8 L 4032x2268 Ratio 1.7777... M S10 L 24.6 set M S10 P at (24.6*.5625) = 13.83 K S8 same as M S10. Set P to (L * .562) */ /* 4 across has 1.6% in margin thus pics should add up to 98.4% to span full width */ /* 5 across has 2.0% in margin thus pics should add up to 98% 6 across 97.6% 7 across 97.2%, 8 across (96.8%)to span full width */ /* Example calcuation 1L, 3P (4 across) Note: using two extra decimal points to avoid rounding error creep*/ /* the ratio of L to P is (from above) (4032/226*) / 0.56250 = 3.1604936 /* 1L + 3P = 98.4*/ /* L = 3.1604936P substitute 3.1604936P + 3P = 98.4 P = 98.4/6.1604936 = 15.972746 L = 3.1604936*15.972746 = 50.481761 Now don't round up to two decimal places because you will slightly exceed the 98.4 and won't fit. P = 15.97, L = 50.48 Note: works perfect but not sure why because it seems I am double counting the ratio? Note: Some of the earlier calcs below might be slightly off from this more exact calc but leave them, they look great. */ /* 5 across has 2.0% in margin thus pics should add up to 98% to span full width */ /* however, also have to trade off portrait vs. landscape height so may not be able to make both dimensions perfect */ /* MOVIES: My landscape movies set at width 365 matches height of 24d60 landscape pics */ /* Movies: My portrait and landscape match height with 200 for portrait and 628 for landscape /* Movies update: You can set the width of a movie using percent to match the picture width /* 0 Landscape x Portrait EXACT - same depth as a 24d60 landscape*/ figure.Left-7d78 {float: left; width: 7.78%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} /* 1 Landscape 2 Portrait EXACT*/ figure.Left-60d51 {float: left; width: 60.51%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Left-19d14 {float: left; width: 19.14%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} /* 1 Landscape 3 Portrait EXACT*/ figure.Left-50d48 {float: left; width: 50.48%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Left-15d97 {float: left; width: 15.97%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} /* 1 Landscape 4 Portrait EXACT*/ figure.Left-43d26 {float: left; width: 43.26%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Left-13d68 {float: left; width: 13.68%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} /* 1 Landscape 5 Portrait EXACT*/ figure.Left-37d78 {float: left; width: 37.78%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Left-11d96 {float: left; width: 11.96%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} /* 2 Landscape 1 Portrait EXXACT */ figure.Left-42d65 {float: left; width: 42.65%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Left-13d49 {float: left; width: 13.49%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} /* 2 Landscape 2 Portrait */ figure.Left-37d30 {float: left; width: 37.30%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Left-11d90 {float: left; width: 11.90%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} /* 2 Landscape 2 Portrait then divide by 2 (restraunt pics usage)*/ figure.Left-18d68 {float: left; width: 18.68%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Left-5d91 {float: left; width: 5.91%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} /* 2 Landscape 2 Portrait EXACT*/ figure.Left-37d37 {float: left; width: 37.37%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Left-11d82 {float: left; width: 11.82%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} /* 2 Landscape 2 Portrait (selfies)*/ figure.Left-34d60 {float: left; width: 34.60%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Left-14d60 {float: left; width: 14.60%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} /* 2 Landscape 3 Portrait */ figure.Left-33d22 {float: left; width: 33.22%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Left-10d52 {float: left; width: 10.52%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} /* 2 Landscape 3 Portrait EXACT */ figure.Left-33d23 {float: left; width: 33.22%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Left-10d51 {float: left; width: 10.52%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} /* 2 Landscape 4 Portrait EXACT*/ figure.Left-29d89 {float: left; width: 29.89%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Left-9d45 {float: left; width: 9.45%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} /* 3 Landscape 2 Portrait */ figure.Left-26d93 {float: left; width: 26.93%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Left-8d60 {float: left; width: 8.60%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} /* 3 Landscape 1 Portrait */ figure.Left-29d70 {float: left; width: 29.70%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Left-9d30 {float: left; width: 9.30%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} /* 3 Landscape 1 Portrait EXACT*/ figure.Left-29d60 {float: left; width: 29.60%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Left-9d39 {float: left; width: 9.39%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} /* 3 Landscape 2 Portrait EXACT*/ figure.Left-26d97 {float: left; width: 26.97%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Left-8d54 {float: left; width: 8.54%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} /* 3 Landscape 3 Portrait EXACT*/ figure.Left-24d71 {float: left; width: 24.71%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Left-7d82 {float: left; width: 7.82%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} /* 4 Landscape 1 Portrait EXACT */ figure.Left-22d70 {float: left; width: 22.70%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Left-7d18 {float: left; width: 7.18%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} /* 4 Landscape 2 Portrait EXACT */ figure.Left-21d07 {float: left; width: 21.07%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Left-6d66 {float: left; width: 6.66%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} /* 5 Landscape 1 Portrait EXACT */ figure.Left-18d36 {float: left; width: 18.36%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Left-5d80 {float: left; width: 5.80%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} /* 1 Landscape 1 Portrait (selfies)) */ figure.Left-24d70 {float: left; width: 24.70%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Left-10d30 {float: left; width: 10.30%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} /* 3 Landscape 1 Portrait (selfies)) */ figure.Left-28d72 {float: left; width: 28.72%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Left-12d24 {float: left; width: 12.24%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} /* 4 Landscape 1 Portrait (selfies)) */ figure.Left-22d16 {float: left; width: 22.16%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Left-9d35 {float: left; width: 9.35%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} /* /* /* portrait same height of landscape 24d60 */ figure.Left-7d78 {float: left; width: 7.78%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} /* portrait same height of landscape 19d60 */ figure.Left-6d20 {float: left; width: 6.20%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} /*================================================================================; Samsung and I Phone Samsung L 4032W x 2268H vs IPhone L 4032W x 3024H thus for same height 3024 / 1.333 24d60 and 18d45 Samsung P 2268W x 4032H vs IPhone P 3024W x 4032H - Height is the same so no need for different dimension if mathcing height Not sure how this works but.... need to take the IPhone value and divide by 1.333 for the samsung to be the same height!? NOTE: If you are using */ figure.Left-18d45 {float: left; width: 18.45%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} /* Matched 29.60 samsung L*/ figure.Left-22d20 {float: left; width: 22.20%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} /* Matched 29.89 samsung L*/ figure.Left-22d41 {float: left; width: 22.41%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} /* Matched 33.23 samsung L*/ figure.Left-24d93 {float: left; width: 24.93%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} /* matches IPhone portrait 16d26 height*/ figure.Left-12d20 {float: left; width: 12.20%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} /* matches samsung portrait 9d45 height*/ figure.Left-12d57 {float: left; width: 12.57%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} /* matches samsung portrait 7d78 height*/ figure.Left-10d35 {float: left; width: 10.35%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} /*================================================================================; Landscape - Landscape Canon Landscape 3- 24d60 - K Samsung Landscape 1-21d60 --good 4 across Canon Landscape 2- 22d60 - K Samsung Landscape 2-26d60 --good 4 across 11/7/22 Canon Landscape 1- 26d60 - K Samsung Landscape 3-23d60 --good 4 across ================================================================================ Landscape - Portrait Canon Landscape 2- 24d60 - Canon Portrait 2- 10d93 --short 4 across Canon Landscape 3- 27d60 - K Samsung Portrait 1- 10 --good 4 across without Portrait getting too small 11/7/22 Canon Landscape 2- 31d60 - K Samsung Portrait 3- 11d60 --good 4 across without Portrait getting too small Canon Landscape 2- 32d60 - K Samsung Portrait 2- 16d60 --good 4 across without Portrait getting too small K Samsung Lanscape 2- 37d60 - K Samsung Portrati 2- 11d60 --good 4 across without Portrait getting too small M Samsung Landscape1- 38 - K Samsung Portrait 1- 12 -- 11/12/22 M Samsung Landscape1- 38 - M Samsung Portrait 1- 16 -- 11/12/22 M Samsung Landscape(actually square) 24d60 -- Good 4 across 11/12/22 M Samsung Landscape(actually square) 19d60 -- Good 5 across 11/12/22 ================================================================================ Portrait - Portrait K Samsung Portrait 4-19d60 -- is a 4 across good size 11/11 Canon Portrait 4- Canon Portrait 3-19d60 - K Samsung Portrait 3- 16d60 -- Can mix and match for good width 11/7 ================================================================================ */ /* CUSTOM LAYOUTS: 1500 x 1000 and 1000x1500 -- Typical aspect ratio for my Canon D60 */ /* In general, to get the lenghts of the images to be the same you divide the landscape image width by 2.25 /* portrait same depth of various landscapes - L P or P L Can also use it for L P P L 58d60 L 26d04 P - two across fills horizontal space 49d60 L 22d04 P - two across 32d90 L 14d62 P - three across (any combination) L P L, etc. 24d60 L 10d93 P - four across (any combination) P P L L, etc. 19d60 L 8d71 P - five across (any combination) L P L P L etc. 16d26 L 7d23 P - six across (any combination) L L L P P P etc. DO a clear float after a mix and match as rounding could cause tiny differences that will mess up the floats */ figure.Left-58d60 {float: left; width: 58.60%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Left-26d04 {float: left; width: 26.04%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Left-22d04 {float: left; width: 22.04%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Left-14d62 {float: left; width: 14.62%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Left-10d93 {float: left; width: 10.93%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Left-8d71 {float: left; width: 8.71%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Left-7d23 {float: left; width: 7.23%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} /* portraits same depth of the two landscapes, three or four across - four is really nice P P L L P L L L L L L Note: has to be portraits first otherwise floats won't work correctly. Note: A little more than the 2.25 ratio (21.86)) because of the margin between the two landscapes. The math: ((24.26*2)/2.25) + .4 = 22.2666 22d27(p)) 22d27(p) 24d60(L) 24d60 (L) clear floats */ figure.Left-22d27 {float: left; width: 22.27%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} /* a good custom layour can put the landscapes in the middle of the portraits P L P L 30d00 33d60 30d00 33d60c1 clear floats */ figure.Left-30d00 {float: left; width: 30%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Left-33d60 {float: left; width: 33.6%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Left-33d60c1 {float: left; width: 33.6%; margin: -22.8% .2% .2% 30.5%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} /* a cutome for charleston */ figure.Left-33d60c2 {float: left; width: 33.6%; margin: -17.5% .2% .2% .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} /* END CUSTOM LAYOUTS: 1500 x 1000 and 1000x1500 -- Typical aspect ratio for my Canon D60 */ /* CUSTOM LAYOUTS mixing 1500 x 1000 Canon aspect ratio with 1500 x 1125 Android aspect ratio Divide Canon by 1.125 for Android - round down, rounding up could make it a tiny bigger and force float not to work correctly Canon Android - both landscape 49d60 44.09 - two across (L) 32d90 29d24 - three across 24d60 21d87 - four across 19d60 17d42 - five across 16d26 14d45 - six across clear floats */ figure.Left-44d09 {float: left; width: 44.09%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Left-29d24 {float: left; width: 29.24%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Left-21d87 {float: left; width: 21.87%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Left-17d42 {float: left; width: 17.42%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Left-14d45 {float: left; width: 14.45%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} /* Portrait Android same depth as the single landscapes Canon L L L P 24d60 24d60 24d60 12d40 clear floats OR 24d60 24d60 24d60 13d90 clear floats */ figure.Left-12d40 {float: left; width: 12.4%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Left-13d90 {float: left; width: 13.9%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} /* custom android portrait with left-31 */ figure.Left-17d50 {float: left; width: 17.5%; margin: .5%; padding: .5%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} /* END CUSTOM LAYOUTS mixing 1500 x 1000 Canon aspect ratio with 1500 x 1125 Android aspect ratio */ /* CUSTOM LAYOUTS 1500 x 1000 to CROPPED BUT NOT PROPORTIONAL (don't do that anymore!) in various early blog entries') */ /* 24 d60 1500 x 1000 - 1500 x 1409 IF they are both 1500 across then can just divide by the ratio of the heights e.g. (24.60 * 1000)/1409*/ figure.Left-17d46 {float: left; width: 17.46%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} /* 24 d60 1500 x 1000 - 1500 x 879 IF they are both 1500 across then can just divide by the ratio of the heights e.g. (24.60 * 1000)/879*/ figure.Left-27d99 {float: left; width: 27.99%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} /* 24 d60 1500 x 1000 - 1479 x 1500 IF they are both 1500 across then can just divide by the ratio of the heights e.g. (24.60 * 1000)/879*/ figure.Left-16d40 {float: left; width: 16.40%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} /* 24 d60 1500 x 1000 - 1500 x 1326 IF they are both 1500 across then can just divide by the ratio of the heights e.g. (24.60 * 1000)/879*/ figure.Left-18d55 {float: left; width: 18.55%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} /* END CUSTOM LAYOUTS 1500 x 1000 to CROPPED BUT NOT PROPORTIONAL (don't do that anymore!) in various early blog entries') /* CUSTOM LAYOUTS 1500 x 1125 and 1125 x 1500 android landscape and portrait */ /* END CUSTOM LAYOUTS: 1500 x 1125 and 1125x1500 -- Typical aspect ratio for Android Galaxy S7 */ /* CUSTOM ALASKA: this next one is PURE CUSTOM FOR A LAYOUT IN THE 2016 Alaska blog. needed to create layout two big portrait bookends and two smaller landscape in the middle. Not perfect but good enough. /* one of the photos was not the standard aspect ratio, that is why the 34d00. P L P L Left-30d00 , Left-33d60, Left 34d00, Left 33d60c1 clear floats */ figure.Left-34d00 {float: left; width: 34%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} /* another custom AK */ figure.Left-33d40 {float: left; width: 33.4%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} /* END CUSTOM ALASKA */ /* OLD CUSTOM LAYOUTS KEEP- Some are still Used. Particularly the first one and second one. custom layout for 600x800 landscape and portrait images */ /* |--------|------|--------|------| | L | p | L | P | |________| |________| | | P |_|______| P |_|______| | | L | | | | | | | L | |______|________|______|________| Left-28d11, Left-21d08, Left-28d11, Left-21d08 Left-21d08-6d8,Left-28d11, Left-21d08-6d8, Left-28d11 The key is the - margin for the 2nd portrait imgages */ figure.Left-21d08 {float: left; width: 21.08%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Left-21d08-6d8 {float: left; width: 21.08%; margin: -6.8% .2% .2% .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Left-28d11 {float: left; width: 28.11%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} /* this next one is needed to create layout. Not perfect but good enough. L Big L L L L Left-24d60 , Left-49d60, Left 24d60, Left 24D60, Left 24D60-17 */ figure.Left-24d60-17 {float: left; width: 24.60%; margin: -17% 0.2% 0.2% 0.2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} /* OLD: 800x600 images this next one is needed to create layout two big portrait bookends and two smaller landscape in the middle. Not perfect but good enough. P L P L Left-32d90 , Left-28d90, Left 32d90, Left 28d90c1 */ figure.Left-32d90 {float: left; width: 32.90%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Left-28d90 {float: left; width: 28.90%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Left-28d90c1 {float: left; width: 28.90%; margin: -22% .2% .2% 33.5%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} /* this next one is needed to create layout one big landscape and one portrait to match the height. A little extra margin on the right. Not perfect but good enough. L P Can also use it for L P P L and L P L P etc. Left-58d60 , Left-32d90 */ figure.Left-58d60 {float: left; width: 58.60%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} /* A couple of portrait that sizes a portrait to be the same height as a landscape at 24d60 (4 to a row). Trial and error to fit the righ one. P L or L P or P L P L etc. 13d90 24d60 24d60 24d60 (P, L, L, L) OR Left-10d90 Another combo 12d90, 28d40, 28d40, 28d40 (P - L - L - L) */ figure.Left-13d90 {float: left; width: 13.90%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Left-12d20 {float: left; width: 12.20%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Left-10d90 {float: left; width: 10.90%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Left-7d90 {float: left; width: 7.90%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Left-12d90 {float: left; width: 12.90%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Left-28d40 {float: left; width: 28.40%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} /* next for 1 P that spans two rows of 24d60 with K's Samsung Phone P L L L L L L */ figure.Left-11d90 {float: left; width: 11.90%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} /* next for 1 P that spans two rows of 24d60 with Cannon D60 camera P L L L L L L */ figure.Left-22d40 {float: left; width: 22.40%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} /* A couple of portrait that sizes a portrait to be the same height as a landscape at 28d40. Trial and error to fit the righ one. L - P - L - P 28d40 15d90 28d40 15d90 OR 14d90 33d50 14d90 33d50 */ figure.Left-15d90 {float: left; width: 15.90%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Left-14d90 {float: left; width: 14.90%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} figure.Left-33d50 {float: left; width: 33.50%; margin: .2%; padding: 0%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;} /* one portait spanning three rows of landscape - works with samsung portrait 600w x proportioned l 24d60 (P) 24d60 * 9 (L)) | L L L P L L L | L L L */ /* END OLD CUSTOM LAYOUTS 800x600 */ /* END Mimic the grid /* Use with FIGURE tag. Without, the image will not scale to the FIGURE scale...seems it should but oh well*/ /* P-100 used in travel.html*/ img.P-100 {width: 100%;} img.P-90 {width: 90%;} /* used in travel.html to match approx height of cannon.jpg with samsung.jpg so they align horizontally. */ img.P-60 {width: 60%;} /* used in travel.html to match approx height of cannon.jpg with samsung.jpg so they align horizontally. */ /* some special effects for images */ /* surround any image you want to show hovering */ .Hover:hover img {opacity: 0.3;} /* rotate image Note: affects container placement if not a square image*/ img.R-90 {transform: rotate(90deg);} img.BlackWhite {filter: grayscale(100%);} /* ===========================================================================*/ /* Grid for text nav/links for the sidebars. Responsive for different size viewports. */ /* ===========================================================================*/ .SideBarG { display: grid; grid-gap: 5px; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); grid-auto-rows: auto; grid-auto-flow: dense; } .SideBarG > div { text-align: left; padding: 2px; justify-content: left; align-items: left; font-size: 1em; color: black; } /* ===========================================================================*/ /* Used to "stick" to top when web page scrolls Used for "Back to Top" link /* ===========================================================================*/ div.StickToTop { position: -webkit-sticky; position: sticky; top: 0; } /* ===========================================================================*/ /* Generic Mosaic Grid for images This is a good responsive grid if you want to add a bunch of pictures and you don't need to give specific placements. Good for lots of images. */ /* ===========================================================================*/ .MosaicGeneric { display: grid; grid-gap: 5px; /* grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); */ grid-template-columns: repeat(auto-fit, 1fr); grid-auto-rows: 100px; grid-auto-flow: dense; } .MosaicGeneric > div { /* display: flex; */ justify-content: center; align-items: center; font-size: 1em; color: black; } .MosaicGeneric > div > img { width: 100%; height: 100%; object-fit: cover; } /* this allows you to put the img within an "a" (href) container */ .MosaicGeneric > div > a > img{ width: 100%; height: 100%; object-fit: cover; } /* Image sizes when using the Generic MOSAIC grid container */ .MG-SquareClR1 {grid-column: span 1; grid-row: span 1;} .MG-SquareC2R2 {grid-column: span 2; grid-row: span 2;} .MG-SquareC3R3 {grid-column: span 3; grid-row: span 3;} .MG-SquareC4R4 {grid-column: span 4; grid-row: span 4;} .MG-LandscapeC2R1 {grid-column: span 2; grid-row: span 1;} .MG-LandscapeC3R2 {grid-column: span 3; grid-row: span 2;} .MG-LandscapeC4R3 {grid-column: span 4; grid-row: span 3;} .MG-LandscapeC6R4 {grid-column: span 6; grid-row: span 4;} .MG-PortraitC1R2 {grid-column: span 1; grid-row: span 2;} .MG-PortraitC2R3 {grid-column: span 2; grid-row: span 3;} .MG-PortraitC2R4 {grid-column: span 2; grid-row: span 4;} .MG-PortraitC3R4 {grid-column: span 2; grid-row: span 4;} .MG-PortraitC4R6 {grid-column: span 4; grid-row: span 6;} /* END image sizes when using the MOSAIC grid container */ /* ===========================================================================*/ /* Mosaic 12 Col Grid for images Used for specific layouts */ /* ===========================================================================*/ .Mosaic12G { display:grid; grid-gap:2px; grid-template-columns:repeat(12, 1fr); grid-auto-rows: 50px; justify-items:stretch; align-items:stretch; } .Mosaic12G > div{ color: black; padding: 2px; } .Mosaic12G > div > img { width: 100%; height: 100%; object-fit: cover; } .Mosaic12G > div > a > img { width: 100%; height: 100%; object-fit: cover; } /* End TwelveColMosiac */ /* layout 2 landscape, 3 portrait */ .L2P3-L1 {grid-column:1/7; grid-row:1/5;} .L2P3-L2 {grid-column:7/13; grid-row:1/5;} .L2P3-P1 {grid-column:1/5; grid-row:5/11;} .L2P3-P2 {grid-column:5/9; grid-row:5/11;} .L2P3-P3 {grid-column:9/13; grid-row:5/11;} /* END layout 2 landscape, 3 portrait */ /* layout 3 portrait, 2 lanscsape */ .P3L2-P1 {grid-column:1/5; grid-row:1/7;} .P3L2-P2 {grid-column:5/9; grid-row:1/7;} .P3L2-P3 {grid-column:9/13; grid-row:1/7;} .P3L2-L1 {grid-column:1/7; grid-row:7/11;} .P3L2-L2 {grid-column:7/13; grid-row:7/11;} /* layout 2 landscape, 3 portrait */ /* layout 2 portrait, 2 lanscsape 1 box*/ .P2L2-P1 {grid-column:1/5; grid-row:1/7;} .P2L2-L1 {grid-column:5/13; grid-row:1/5;} .P2L2-B1 {grid-column:5/9; grid-row:5/7;} .P2L2-P2 {grid-column:9/13; grid-row:5/11;} .P2L2-L2 {grid-column:1/9; grid-row:7/11;} /* ===========================================================================*/ /* Grid Table for ModelKit */ /* ===========================================================================*/ /* headings MKH*/ .ModelTable .Prod {grid-area: Prod; text-align: center; font-weight: bold; background-color: #3B5998; color: White;} .ModelTable .Char {grid-area: Char; text-align: center; font-weight: bold; background-color: #3B5998; color: White;} .ModelTable .Perf {grid-area: Perf; text-align: center; font-weight: bold; background-color: #3B5998; color: White;} .ModelTable .Arma {grid-area: Arma; text-align: center; font-weight: bold; background-color: #3B5998; color: White;} .ModelTable { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-areas: "Prod Prod Char Char" ". . . ." ". . . ." ". . . ." ". . . ." ". . . ." ". . . ." ". . . ." ". . . ." ". . . ." "Perf Perf Arma Arma" ". . . ." ". . . ." ". . . ." ; } .ModelTable > div { border:1px solid black; padding: 5px; word-break: break-all; } .ModelTable > div:nth-child(odd){ font-weight: bold; } /* ===========================================================================*/ /* Grid Table for State Data */ /* ===========================================================================*/ .StateTable .State {grid-area: State; text-align: left; font-weight: bold; background-color: #3B5998; color: White;} .StateTable .Capital {grid-area: Capital; text-align: left;font-weight: bold;background-color: #8B9DC3;} .StateTable .DateAd {grid-area: DateAd; text-align: left;font-weight: bold;background-color: #8B9DC3;} .StateTable .OrderAd {grid-area: OrderAd; text-align: left;font-weight: bold;background-color: #8B9DC3;} .StateTable .NatFor {grid-area: NatFor; text-align: left;font-weight: bold;background-color: #8B9DC3;} .StateTable .NatPark {grid-area: NatPark; text-align: left;font-weight: bold;background-color: #8B9DC3;} .StateTable .StatePark {grid-area: StatePark; text-align: left;font-weight: bold;background-color: #8B9DC3;} .StateTable .Blank {grid-area: Blank; text-align: left;font-weight: bold;background-color: #8B9DC3;} .StateTable .Geo {grid-area: Geo; text-align: left;font-weight: bold;background-color: #8B9DC3;} .StateTable .Demo {grid-area: Demo; text-align: left;font-weight: bold;background-color: #8B9DC3;} .StateTable .Tax {grid-area: Tax; text-align: left;font-weight: bold;background-color: #8B9DC3;} .StateTable .Area {grid-area: Area; text-align: left;font-weight: bold;background-color: #8B9DC3;} .StateTable .HighEl {grid-area: HighEl; text-align: left;font-weight: bold;background-color: #8B9DC3;} .StateTable .Pop {grid-area: Pop; text-align: left;font-weight: bold;background-color: #8B9DC3;} .StateTable .HHInc {grid-area: HHInc; text-align: left;font-weight: bold;background-color: #8B9DC3;} .StateTable .IncTax {grid-area: IncTax; text-align: left;font-weight: bold;background-color: #8B9DC3;} .StateTable .SalesTax {grid-area: SalesTax; text-align: left;font-weight: bold;background-color: #8B9DC3;} .StateTable .PropTax {grid-area: PropTax; text-align: left;font-weight: bold;background-color: #8B9DC3;} .StateTable { display: grid; grid-template-columns: repeat(7, 1fr); grid-template-areas: "State State State State State State State " "Capital DateAd OrderAd NatFor NatPark StatePark Blank" ". . . . . . . " "Geo Geo Demo Demo Tax Tax Tax" "Area HighEl Pop HHInc IncTax SalesTax PropTax" ". . . . . . ." ; } .StateTable > div { border:1px solid black; padding: 5px; word-break: break-all; } /* ===========================================================================*/ /* Grid Tables for State and City Data */ /* ===========================================================================*/ .CityTable .City {grid-area: City; text-align: left; font-weight: bold; background-color: #3B5998; color: White;} .CityTable .Climate {grid-area: Climate; text-align: left;font-weight: bold;background-color: #8B9DC3;} .CityTable .Temp {grid-area: Temp; text-align: left;font-weight: bold;background-color: #8B9DC3;} .CityTable .Hum {grid-area: Hum; text-align: left;font-weight: bold;background-color: #8B9DC3;} .CityTable .Precip {grid-area: Precip; text-align: left;font-weight: bold;background-color: #8B9DC3;} .CityTable .Geo {grid-area: Geo; text-align: left;font-weight: bold;background-color: #8B9DC3;} .CityTable .Demo {grid-area: Demo; text-align: left;font-weight: bold;background-color: #8B9DC3;} .CityTable .Tax {grid-area: Tax; text-align: left;font-weight: bold;background-color: #8B9DC3;} .CityTable { display: grid; grid-template-columns: repeat(10, 1fr); grid-template-areas: "City City City City City City City City City City" "Climate Climate Climate Climate Climate Climate Climate Climate Climate Climate" "Temp Temp Temp Hum Hum Hum Precip Precip Precip Precip" ". . . . . . . . . ." ". . . . . . . . . ." "Geo Geo Demo Demo Demo Demo Demo Tax Tax Tax" ". . . . . . . . . ." ". . . . . . . . . ." ; } .CityTable > div { border:1px solid black; padding: 5px; word-break: break-all; } /* styles for the hiking tables for the local hikes */ table.hiket1 {width: 100%;border: 3px solid black; border-collapse: collapse} th.hiketh1{ font-family: "Arial",Helvetica,sans-serif; font-size: 16px; font-weight:bold; color: Black; background: #8B9DC3; width: 100%; border: solid black 1px;} th.hiketh2{ font-family: "Arial",Helvetica,sans-serif; font-size: 16px; font-weight:bold; color: Black; background: #8B9DC3; width: 20%; border: solid black 1px;} th.hiketh3{ font-family: "Arial",Helvetica,sans-serif; font-size: 16px; font-weight:bold; color: Black; background: #8B9DC3; width: 8.6%} td.hiketd1{color: Black; background: #DFE3EE; text-align: left; margin: 0;; border: solid black 1px;} /* end hike styles */ /* ===========================================================================*/ /* Slide Show Styles I have two slide shows one does not display thumbnails below it, the other one does. Both have Auto capability SS- is used for common styles between the two. SSB- is used for unique styles to basic slide show SST- is used for unique styles to thumbnail slide show */ /* ===========================================================================*/ /* ===========================================================================*/ /* These styles are common to both slideshows */ /* ===========================================================================*/ /* ===========================================================================*/ /* Slide Show Buttons. The first is for the button on the side bar to call the slide show, Button2 is for the slide show page */ /* ===========================================================================*/ .SS_Button {text-align: center; width : 80%; background-color: #3B5998; color: White; /* 6/18/23: wasbackground-color: #236AB9; color: #D4E4F7;*/ padding: 10px; transition-duration: 0.4s; } .SS_Button:hover { background-color: White; color: #8B9DC3; /* 6/18/23: was background-color: #D4E4F7; color:# 236AB9; */ } .SS_Button2 {text-align: center; width : 100px; background-color: #8B9DC3; color: White; /* 6/18/23: wasbackground-color: #236AB9; color: #D4E4F7;*/ padding: 10px; transition-duration: 0.4s; } .SS_Button2:hover { background-color: White; color: #8B9DC3; /* 6/18/23: was background-color: #D4E4F7; color:# 236AB9; */ } /* Position the image container (needed to position the left and right arrows) */ .SS_Container { /* max-width: 1500px; */ background-color: #F7F7F7; color: #3B5998; position: relative; margin: auto; border-left: 4px solid #3B5998; border-right: 4px solid #3B5998; } /* Next & previous buttons */ .SS_Next, .SS_Prev { cursor: pointer; position: absolute; top: 100px; /*hard coded */ width: auto; padding: 16px; margin-top: -50px; background-color: #3B5998; color: #8B9DC3; font-weight: bold; font-size: 30px; border-radius: 0 3px 3px 0; user-select: none; -webkit-user-select: none; } /* Position the "SS_Next button" to the right */ .SS_Next { right: 0; border-radius: 3px 0 0 3px; } /* On hover, add a black background color with a little bit see-through */ .SS_Next:hover, .SS_Prev:hover { background-color: #8B9DC3; color: #3B5998; } /* Number text (1/3 etc) */ .SS_NumberText { font-family: "Arial",Helvetica,sans-serif; font-style: normal; text-align: center; color: #3B5998; padding: 8px 12px; position: absolute; top: 0; } /* On smaller screens, decrease text size */ @media only screen and (max-width: 300px) { .SS_Next, .SS_Prev,.SSB_Text {font-size: 11px} } /* ===========================================================================*/ /* SSB- These styles are unique to the basic slideshow */ /* ===========================================================================*/ /* Caption text */ .SSB_Text { /* color: #f2f2f2; */ color: black; font-size: 15px; padding: 8px 12px; /* position: absolute; */ position: relative; /* bottom: 8px; */ bottom: 30px; width: 100%; text-align: center; } /* Fading animation */ .SSB_Fade { -webkit-animation-name: SSB_Fade; -webkit-animation-duration: 1.5s; animation-name: SSB_Fade; animation-duration: 1.5s; } @-webkit-keyframes SSB_Fade { from {opacity: .4} to {opacity: 1} } @keyframes SSB_Fade { from {opacity: .4} to {opacity: 1} } /* ===========================================================================*/ /* SST- These styles are unique to the thumbnail slideshow */ /* ===========================================================================*/ .SST_Header { font-family: "Arial",Helvetica,sans-serif; font-style: normal; text-align: center; background-color: #3B5998; color: #D4E4F7; padding: 10px; /* position: fixed; left: 0; top: 0; width: 100%; */ } /* Hide the images by default */ .SST_MySlides { display: none; } /* image location and size */ /* Does not look good in landscape mode on phone. */ .SST_Img { /* width:60%; margin-left:20%; debug*/ display: block; margin: 0 auto; max-height: 800px; width: auto; border-left: 4px solid #3B5998; border-right: 4px solid #3B5998; } /* smaller display*/ @media only screen and (max-width: 540px) { .SST_Img {max-height: 300px;} } /* Add a pointer when hovering over the thumbnail images */ .SST_cursor { cursor: pointer; } /* Container for image text */ .SST_CaptionContainer { font-family: "Arial",Helvetica,sans-serif; font-style: normal; text-align: center; background-color: #3B5998; padding: 2px 16px; color: #D4E4F7; } .SST_Row:after { content: ""; display: table; clear: both; } /* Six columns side by side */ .SST_Column { float: left; width: 16.66%; } /* Add a transparency effect for thumnbail images */ .SST_Demo { opacity: 0.6; } .SST_Active, .SST_Demo:hover { opacity: 1; }